iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
1
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 8

第八步 - 了解密鑰使用方法(設計框架所會遇到的常見問題)

  • 分享至 

  • xImage
  •  

悄悄的經過一個星期,又到了憂鬱的星期一,我是喵橘,今天我要講解設計框架所會遇到的常見問題。

網頁製作前預先準備的態度

網頁並不是直接程式就開始撰寫架構,需要依據自己的產業與公司需求來進行製作,所以,要先構想一個架構,但在設計前,要先注意什麼事情呢?

  1. 智慧手機普及,使用者找尋資料的習慣改變。

到了現在,每一個民眾手上都會握著一支手機,會找尋自己想要看的資訊,所以,出現了低頭族的副文化,因此,網頁的設計有逐漸 APP 化,並且,使用者追求新鮮感,所以,網頁設計必須能製作時常能隨存取變換資訊的動態網頁,也保持設計的一致性,也就是通用性高的網頁設計。

https://ithelp.ithome.com.tw/upload/images/20190909/20117282JNq9zTaTpQ.png

  1. 時常瀏覽相關網頁設計的模板,增加對排版以及顏色配置的靈敏度。

現在虛擬世界的變化快速,所以,網頁的製作也跟隨環境而瞬息萬變。所以,要養成關注軟體最新功能、設計以及標記語言是否有改進或新增,還有創新的想法以及突破性的創意,都是相當重要。以下推薦一些相關設計網頁模板。

  • Dribbble

網址:https://dribbble.com

  • Reeoo

網址:http://reeoo.com/

  • S5-Style

網址:https://bm.s5-style.com/

  • Pttrns

網址:https://www.pttrns.com/

  • Wireframes

網址:http://wireframes.linowski.ca/page/2/

  • Lovely UI

網址:https://www.lovelyui.com/

  1. 時常到處收集相關的資訊。

身處廣大的網路業界,如何有效收集最新技術以及設計相關資訊是非常重要的一件事情。近年來,台灣會舉辦與設計師相關的研討活動,可以多去參加這一類型的活動,時常更新這一塊領域的想法,藉此打造出能迅速因應趨勢變化的環境。

網頁設計遇到的常見問題與建議

  1. 按鈕尺寸大小需要注意

使用蘋果系列的手機或電腦使用者相當多人,還有手提與平板結合在一起的裝置出現。因此,按鈕尺寸大小就是一個相當重要的課題。也就是在設計按鈕的時候,就要考慮到觸控操作的部分,要保留適當的觸控區域,如果太小,觸控時將會被手指遮住,就無法得知按鈕的位置。所以,可觸碰的按鈕尺寸必須超過44像素

  1. 利用網格系統有計畫的編排版面

桌上排版系統(英語:Desktop publishing,簡稱:DTP)或平面設計慣用的排版系統,是將版面分割成格狀作為版型基準,讓看起來隨機的排版可以更整齊的技術。響應式網頁設計主要是採取12欄的網格,12欄顧名思義就是利用12個(直欄)分割區來設計版面,每一個欄位都是用 % 指定,一個分割區大概寬度是 1/12 = 8.3333% 。

  1. 文字大小設定

網頁設計往往很容易受到作業系統和瀏覽器影響,能否支援各種環境是相當重要的。因此,文字大小的設計就相當重要,例如: Google 瀏覽器的最小字級需要10像素。所以,建議除非是相當特殊的狀況,就盡量文字小於10像素,不只難閱讀,也不是一個好的設計。

  1. 注意裝置螢幕方向

操作智慧型手機或平板,每一個人使用習慣不同,會有直式或橫式看網頁的不同習慣,所以,在設計版面切記要思考到直式與橫式切換,是否有影響到版面排版與物件的偏移。解決方法分為三種,如下所顯示。

  • 徹底禁止橫向操作方法。
  • 固定寬度。
  • 符合版面的響應式設計。
  1. 買斷式授權(英語:Royalty-free)圖片,真的是免費?

像網路上許多漂亮的照片,都具有著作權,有一種授權方式是第一次使用時,會先支付小額的金額並遵守相關規定,即可免除之後的每次使用權,這就是所謂的買斷式授權,但並非完全免費的素材,使用前需要好好注意裡面撰寫的相關規則。

  1. 字型的使用與設定

網頁的內容的字型選擇通常不會使用明體,這是因為在 Window ,消除鋸齒處理較弱、邊緣會呈鋸齒狀,導致顯示效果不夠美觀,所以,網頁設計通常都是選擇黑體系列來設計。還有隨著使用者的電話或隨行裝置會有支援上的差異,因此,網頁字型不會單單設定一種樣式,避免問題產生,會設定兩種以上的字型模式。

明天預告


今天講解 設計框架所會遇到的常見問題,因為偏向理論,文字稍微多,請各位多多見諒。明天會準備開始講解網頁設計的程式設計,謝謝大家耐心的觀看。


上一篇
第七步 - 找尋到關鍵的密鑰(網頁設計前的方便軟體推薦)
下一篇
第九步 - 啟動密鑰,開起第一層挑戰(HTML 文件結構)
系列文
一步一腳印,探索網頁前端設計之美33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言